<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="/after/css/bootstrap.min.css">
    <link rel="stylesheet" href="/after/css/laypage.css">

    <script type="text/javascript" src="/after/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/after/js/laypage/laypage.js"></script>
    <script type="text/javascript" src="/after/js/layer/layer.js"></script>
    <script type="text/javascript" src="/after/js/vue/vue.min.js"></script>
    <script src="/after/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/after/jquery.validation/1.14.0/messages_zh.min.js"></script>

</head>
<style>
    input.error {
        border: 1px solid red;
    }
</style>
<body>
<div id="app">
<div class="container">
    <form id="addUserForm" name="addUserForm" method="post" action="/active/updateActive.do" enctype="multipart/form-data">
        <br/>
        <input type="hidden" class="form-control" id="id" name="id" :value="active.id">
        <div class="form-group">
            <label for="name">活动名称：</label>
            <input type="text" class="form-control" id="name" name="name" :value="active.name" placeholder="输入活动名称">
        </div>
        <div class="form-group">
            <label for="content">活动内容：</label>
            <input type="text" class="form-control" id="content" name="content" :value="active.content" placeholder="输入活动内容">
        </div>
        <div class="form-group">
            <label for="file">活动图片：</label>
            <input type="file" id="file" name="file">
        </div>
        <div class="form-group">
            <label for="createTime">活动开始时间：</label>
            <input type="text" class="form-control" id="createTime" name="createTime" :value="active.createTime" placeholder="输入活动内容">

        </div>

        <div class="form-group">
            <label for="endTime">活动结束时间：</label>
            <input type="text" class="form-control" id="endTime" name="endTime" :value="active.endTime" placeholder="输入活动内容">
        </div>
        <div class="form-group">
            <label for="discount">折扣：</label>
            <input type="text" class="form-control" id="discount" :value="active.discount" name="discount" placeholder="输入活动内容">
        </div>
        <input type="hidden" class="form-control" id="yincang1" :value="active.btype.id">
        <input type="hidden" class="form-control" id="yincang2" :value="active.btype.type">
        <div class="form-group">
            <label for="btype">针对类型：</label>
            <select id="type" name="bid" onclick="findBtype()">
                <option :value="active.btype.id" id="type1">{{active.btype.type}}</option>
               <!-- <option v-for="b in btype" v-bind:value="b.id">{{b.type}}</option>-->
            </select>
        </div>

        <div class="form-group">
            <button type="button" id="saveBtn" onclick="save()" class="btn btn-success">提交</button>
            <button type="button" id="cancelB" onclick="calcelBtn()" class="btn btn-default">取消</button>
        </div>
    </form>
</div>
</div>
</body>
</html>

<script>


    var app = new Vue({
        el:'#app',
        data:{
            active:[]
        }
    })


    var findBtype=function () {
        var value1=$("#yincang1").val();
        var value2=$("#yincang2").val();
        $("#type").html("");
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/active/findBtype.do',
            data: {
            },
            success: function (msg) {
                app.btype = msg.btype;
                var str="<option value='value1'>"+value2+"</option>";
                for (var i=0;i<msg.btype.length;i++){
                  var str1="<option value='msg.btype[i].id'>"+msg.btype[i].type+"</option>";
                    str+=str1;
                }
                $("#type").html(str);
            }
        });
    }


    function GetQueryString(sProp)
    {
        var re = new RegExp("[&,?]"+sProp + "=([^\\&]*)", "i");
        var a = re.exec(document.location.search);
        if (a == null)
            return "";
        return a[1];
    }

    function query(){
        $.ajax({
            type:"GET",
            dataType:"json",
            data:{
                id:GetQueryString("id")
            },
            url:"/active/findActive.do",
            success:function(msg){
                app.active = msg.active;
                app.active.createTime = forlataTime(msg.active.createTime);
                app.active.endTime = forlataTime(msg.active.endTime);
            },error:function(){
                alert("错");
            }
        })
    }
    query();

    //沈敏时间
    var forlataTime = function (time) {
        //参数time为从后台取到的毫秒数
        dataTime = new Date(time);
        var y = dataTime.getFullYear();    //显示年;
        var m = dataTime.getMonth() + 1;    //显示月
        m = m < 10 ? ('0' + m) : m;
        var d = dataTime.getDate();     //显示日
        d = d < 10 ? ('0' + d) : d;
        var h = dataTime.getHours();    //显示小时
        var minute = dataTime.getMinutes();     //显示分钟
        var s = dataTime.getSeconds();
        h = h < 10 ? ('0' + h) : h;
        s = s < 10 ? ('0' + s) : s;
        minute = minute < 10 ? ('0' + minute) : minute;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+s;     //返回最终时间y-m-d h-m
    }


    function calcelBtn(){
        console.log("关闭");
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    function save(){

        if(updateActive()){
            $("#addUserForm").submit();
            calcelBtn();
        }
    }

    var updateActive = function() {
        //检验form表单是否为空 ，调用check()方法
        if (!check().form()) {
            return false;
        }else{

            //检验时间大小
            var createTime=($("#createTime").val());
            var endTime=($("#endTime").val());

            var d1 = new Date(createTime.replace(/\-/g, "\/"));
            var d2 = new Date(endTime.replace(/\-/g, "\/"));

            //检验时间格式
            var role1=/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-)) (20|21|22|23|[0-1]?\d):[0-5]?\d:[0-5]?\d$/;
            if(!role1.test(createTime)||!role1.test(endTime)){
                layer.msg("时间格式不正确");
                return false
            }

            if(d2-d1<=0) {
                layer.msg("活动开始时间不能大于或等于结束时间");
                return false;
            }

            //检验折扣大小
            var role=/^0\.\d*[1-9]\d*$/;
            var num=$("#discount").val();
            if(!role.test(num)){
                layer.msg("折扣不能大于1且不能小于0");
                return false;
            }
            return true;
        }
    }


    //校验数据是否为空
    function check(){
        return $("#addUserForm").validate({
            rules:{
                name:{
                    required: true
                },
                content:{
                    required: true
                },
                file:{
                    required: true
                },
                createTime:{
                    required: true
                },
                endTime:{
                    required: true
                },
                discount:{
                    required: true
                }
            },
            messages:{
                name:{
                    required: ""
                },
                content:{
                    required: ""
                },
                file:{
                    required: ""
                },
                createTime:{
                    required: ""
                },
                endTime:{
                    required: ""
                },
                discount:{
                    required: ""
                }
            }
        })
    }




</script>